<template>
    <div>
        <el-form :model="searchForm" label-width="80px">
            <el-form-item label="药品名称">
                <el-input v-model="searchForm.value" placeholder="输入药品名称" style="width: 200px"></el-input>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-table style="height: 320px;overflow-y: scroll" :data="pageResult.records" border
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="编号" prop="keywords"></el-table-column>
            <el-table-column label="名称" prop="medicinesName"></el-table-column>
            <el-table-column label="规格" prop="unit"></el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageResult.current"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageResult.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageResult.total">
        </el-pagination>
        <div slot="footer" class="dialog-footer" style="margin-top: 20px;position: relative;left: 80%">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </div>
</template>

<script>
    //引入药品服务类
    import {DrugsService} from "../../../model/common/drugs/DrugsService";

    const drugsService = DrugsService.getInstance()

    export default {
        data() {
            return {
                searchForm: {
                    value: '',
                    size: 10,
                    page: 1
                },
                pageResult: {},
                selections: []
            }
        },
        methods: {
            //获取药品的方法
            pageQueryDrugs() {
                drugsService.pageQuery(this.searchForm).then(({data}) => {
                    if (data.code === 0) {
                        this.pageResult = data.data
                    }
                })
            },
            //size改变的方法
            handleSizeChange(size) {
                this.searchForm.size = size
                this.pageQueryDrugs()
            },
            //当前页改变的方法
            handleCurrentChange(page) {
                this.searchForm.page = page
                this.pageQueryDrugs()
            },
            //选择项发生变化的事件
            handleSelectionChange(selection) {
                this.selections = selection
            },
            //取消的方法
            handleCancel() {
                this.$emit('cancel')
            },
            //提交的方法
            handleSubmit() {
                this.$emit('submit',this.selections)
            }
        },
        created() {
            this.pageQueryDrugs()
        }
    }
</script>

<style scoped>

</style>
